<template>
    <ul ref="maincontainer" class="project-container" v-loading="loading" >
      <li class="list" v-for="item in data" :key="item.id">
        <a class="left-txt" :target="item.url?'_blank':'_self'"   :href="item.url?item.url:`javascript:alert('该项目外网无法访问')`">    
         <h2>{{item.name}}</h2>
         <p v-for="(subset ,i) in item.description" :key="i" >{{subset}}</p>
        </a>
        <a :href="item.url?item.url:`javascript:alert('该项目外网无法访问')`" :target="item.url?'_blank':'_self'"  class="right-img" >
          <img v-lazy="item.thumb" :src="item.thumb" alt="data.name">
        </a>
         <a v-if="item.github" :href="item.github" target="_blank"  id="github">github >></a>
      </li>
       <Empty v-if="data.length === 0 && !loading" />
    </ul>
  
</template>

<script>
import Empty from "../../components/Empty/index.vue"
import setmainScroll from "../../mixins/setmainScroll.js"
// import ToTop from "../../components/ToTop"
import { mapState } from 'vuex'
export default {
  mixins:[setmainScroll('maincontainer')],
  components:{
//  ToTop,
 Empty,
  },
computed:mapState('project',['data','loading']),
created(){
  this.$store.dispatch('project/fetchProject')
  
},
mounted(){
  console.log(this.data,this.loading)
}
}
</script>

<style lang="less" scoped>
@import "../../style/var.less";
.project-container{
  background: rgba(193, 189, 189, 0.5);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 20px ;
  overflow-y: scroll;
  scroll-behavior: smooth;
  position: relative;
  a{
    color: #000;
  }
   .list{
     position: relative;
     display: flex;
     padding: 20px;
     width: 95%;
     height: 200px;
     border-radius: 10px;
    //  border: 1px solid rgb(194, 192, 192);
     border-top: 1px solid rgb(194, 192, 192);
     list-style: none;
     overflow: hidden;
     
       #github{
        position: absolute;
        right: 100px;
        bottom: 10px;
        width: 100px ;
        height: 25px;
        border-radius: 5px;
        text-align: center;
        line-height: 25px;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
       background: rgb(11, 11, 11);
       color: #fff;

      }
      .left-txt{
      width: 60%;
      }
      &:hover{
         color: #000;
         background: rgb(255, 255, 255);
         box-shadow: 1px 1px 8px rgba(28, 3, 69, 0.5);
         transition: 0.5s;
     
        }
        h2{
      margin: 0;
      margin-bottom: 5px; 
         }
      .right-img{
     position: absolute;
        right: 100px;
       width: 250px;
      height: 70%;
      img{
        border-radius: 10px;
        width: 100%;
        height: 100%;
         object-fit: cover;
      }
       }
   }
}
</style>